<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>深入 flexbox</title>
	<style type="text/css">
		/* * {
            margin: 0;
            padding: 0;
        } */
        .section-list {
            display: flex;
        }
        .section-list .section {
            flex: 1;
        }
        .section-list .section:first-of-type {
            margin-right: 40px;
        }
        .flexbox {
			display: flex;
			background: #DCDEE0;
		}
		.item {
			width: 100px;
			background: #0365C0;
			margin: 10px;
			color: #fff;
			text-align: center;
			line-height: 50px;
		}
        .flexbox--inline {
            display: inline-flex;
        }
        .direction-row-reverse {
            flex-direction: row-reverse;
        }
        .direction-column {
            flex-direction: column;
        }
        .direction-column-reverse {
            flex-direction: column-reverse;
        }
        .flexbox--wrap {
            width: 400px;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap-reverse {
            flex-wrap: wrap-reverse;
        }
        .justify-content-end {
            justify-content: flex-end;
        }
        .justify-content-center {
            justify-content: center;
        }
        .justify-content-space-around {
            justify-content: space-around;
        }
        .justify-content-space-between {
            justify-content: space-between;
        }
        .align-items {
            height: 120px;
        }
        .align-items .item:nth-of-type(2) {
            line-height: 80px;
        }
        .align-items .item:nth-of-type(3) {
            line-height: 60px;
        }
        .align-items--flex-start {
            align-items: flex-start;
        }
        .align-items--flex-end {
            align-items: flex-end;
        }
        .align-items--center {
            align-items: center;
        }
        .align-items--baseline {
            align-items: baseline;
        }
        .align-content {
            flex-wrap: wrap;
            width: 400px;
            height: 200px;
        }
        .align-content--center {
            align-content: center;
        }
        .align-content--flex-start {
            align-content: flex-start;
        }
        .align-content--flex-end {
            align-content: flex-end;
        }
        .align-content--space-between {
            align-content: space-between;
        }
        .align-content--space-around {
            align-content: space-around;
        }
        .flexbox--align-self {
            height: 150px;
            align-items: flex-start;
        }
        .flexbox--align-self .item:nth-of-type(2) {
            line-height: 70px;
        }
        .align-self-flex-start {
            align-items: center;
        }
        .item--flex-start {
            align-self: flex-start;
        }
        .item--flex-end {
            align-self: flex-end;
        }
        .item--center {
            align-self: center;
        }
        .item--baseline {
            align-self: baseline; 
        }
        .item--stretch {
            align-self: stretch;
        }
        .item--order {
            order: -1;
        }
        .flexbox--grow .item {
            flex-grow: 1;
        }
        .flexbox--grow .item--grow-2 {
            flex-grow: 2;
        }
        .flexbox--shrink {
            width: 400px;
        }
        .flexbox--shrink .item {
            width: 200px;
        }
        .flexbox--shrink .item--shrink-2 {
            flex-shrink: 2;
        }
        .flexbox--basis .item--basis {
            flex-basis: 150px;
        }
        .flexbox--flex .item{
            flex: 1;
        }
        .flexbox--flex .item:nth-of-type(2) {
            flex: 3;
        }
	</style>
</head>
<body>
    <h1>flexbox</h1>
    <div class="section-list">
        <section class="section">
            <h2>flex container 属性</h2>
            <h3>display</h3>
            <h4>flex</h4>
            <div class="flexbox">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>inline-flex</h4>
            <div class="flexbox flexbox--inline">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h3>flex-direction</h3>
            <h4>row（默认）</h4>
            <div class="flexbox">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>row-reverse</h4>
            <div class="flexbox direction-row-reverse">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>column</h4>
            <div class="flexbox direction-column">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>column-reverse</h4>
            <div class="flexbox direction-column-reverse">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h3>flex-wrap</h3>
            <h4>no-wrap（默认）</h4>
            <div class="flexbox flexbox--wrap">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>wrap</h4>
            <div class="flexbox flexbox--wrap wrap">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>wrap-reverse</h4>
            <div class="flexbox flexbox--wrap wrap-reverse ">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h3>justify-content</h3>
            <h4>flex-start（默认）</h4>
            <div class="flexbox justify-content-start">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>flex-end</h4>
            <div class="flexbox justify-content-end">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>center</h4>
            <div class="flexbox justify-content-center">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>space-around</h4>
            <div class="flexbox justify-content-space-around">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>space-between</h4>
            <div class="flexbox justify-content-space-between">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h3>align-items</h3>
            <h4>stretch（默认）</h4>
            <div class="flexbox align-items">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>flex-start</h4>
            <div class="flexbox align-items align-items--flex-start">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>flex-end</h4>
            <div class="flexbox align-items align-items--flex-end">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>center</h4>
            <div class="flexbox align-items align-items--center">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h4>baseline</h4>
            <div class="flexbox align-items align-items--baseline">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
            <h3>align-content</h3>
            <h4>stretch（默认）</h4>
            <div class="flexbox align-content">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>flex-start</h4>
            <div class="flexbox align-content align-content--flex-start">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>flex-end</h4>
            <div class="flexbox align-content align-content--flex-end">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>center</h4>
            <div class="flexbox align-content align-content--center">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>space-around</h4>
            <div class="flexbox align-content align-content--space-around">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
            <h4>space-between</h4>
            <div class="flexbox align-content align-content--space-between">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
                <div class="item">6</div>
            </div>
        </section>
        <section class="section">
            <h2>flex item 属性</h2>
            <h3>align-self</h3>
            <h4>auto（默认）</h4>
            <div class="flexbox flexbox--align-self">
                <div class="item">1</div>
                <div class="item item--align-self">2</div>
                <div class="item">3</div>
            </div>
            <h4>flex-start</h4>
            <div class="flexbox flexbox--align-self align-self-flex-start">
                <div class="item">1</div>
                <div class="item item--flex-start">2</div>
                <div class="item">3</div>
            </div>
            <h4>flex-end</h4>
            <div class="flexbox flexbox--align-self">
                <div class="item">1</div>
                <div class="item item--flex-end">2</div>
                <div class="item">3</div>
            </div>
            <h4>center</h4>
            <div class="flexbox flexbox--align-self">
                <div class="item">1</div>
                <div class="item item--center">2</div>
                <div class="item">3</div>
            </div>
            <h4>baseline</h4>
            <div class="flexbox flexbox--align-self">
                <div class="item">1</div>
                <div class="item item--baseline">2</div>
                <div class="item">3</div>
            </div>
            <h4>stretch</h4>
            <div class="flexbox flexbox--align-self">
                <div class="item">1</div>
                <div class="item item--stretch">2</div>
                <div class="item">3</div>
            </div>
            <h3>order</h3>
            <div class="flexbox">
                <div class="item">1</div>
                <div class="item item--order">2</div>
                <div class="item">3</div>
            </div>
            <h3>flex-grow</h3>
            <div class="flexbox flexbox--grow">
                <div class="item">1</div>
                <div class="item item--grow-2">2</div>
                <div class="item">3</div>
            </div>
            <h3>flex-shrink</h3>
            <div class="flexbox flexbox--shrink">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item item--shrink-2">3</div>
            </div>
            <h3>flex-basis</h3>
            <div class="flexbox flexbox--basis">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item item--basis">3</div>
            </div>
            <h3>flex</h3>
            <div class="flexbox flexbox--flex">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
            </div>
        </section>
    </div>
</body>
</html>





